<template>
  <div id="app">
    <el-container class="map-editor-body">
      <el-header style="background-color:#545c64">
        <el-menu
          :default-active="activeIndex"
          class="map-editor-head"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <div class="map-editor-head-logo">Logo</div>
          <el-menu-item index="1" @click="createCanvas()">新建画板</el-menu-item>
          <el-menu-item index="2">打开画板</el-menu-item>
          <el-menu-item index="3">保存画板</el-menu-item>
          <el-menu-item index="4" style="float: right">退出</el-menu-item>
          <!--<el-submenu index="2">-->
          <!--<template slot="title">我的工作台</template>-->
          <!--<el-menu-item index="2-1">选项1</el-menu-item>-->
          <!--<el-menu-item index="2-2">选项2</el-menu-item>-->
          <!--<el-menu-item index="2-3">选项3</el-menu-item>-->
          <!--<el-submenu index="2-4">-->
          <!--<template slot="title">选项4</template>-->
          <!--<el-menu-item index="2-4-1">选项1</el-menu-item>-->
          <!--<el-menu-item index="2-4-2">选项2</el-menu-item>-->
          <!--<el-menu-item index="2-4-3">选项3</el-menu-item>-->
          <!--</el-submenu>-->
          <!--</el-submenu>-->
          <!--<el-menu-item index="3" disabled>消息中心</el-menu-item>-->
          <!--<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>-->
        </el-menu>
      </el-header>
      <el-container>
        <el-aside width="200px">
         <div class="map-editor-left-button-group"></div>
        </el-aside>
        <el-main class="map-editor-content">
          <div class="map-editor-canvas" id="mapEditorCanvas">
            <canvas id="mapCanvas" :width="canvasWidth" :height="canvasHeight"></canvas>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  var $ = require('jquery')
  var oCanvas = require('ocanvas')
  export default {
    name: 'App',
    data() {
      return {
        activeIndex: '5',
        canvasWidth:'',
        canvasHeight:'',
      }
    },
    mounted() {
      /* eslint-disable */
      var that = this;

    },
    methods: {
      createCanvas() {
        var mapEditorCanvasDom = $('#mapEditorCanvas');
        var width = mapEditorCanvasDom.width();
        var height = mapEditorCanvasDom.height();
        var mapHeight = 1136;
        var mapWidth = 640;
        var scaleWidth = mapWidth / width;
        var scaleHeight = mapHeight / height;
        var scale = 1;
        if (scaleHeight > scaleWidth) {
          scale = scaleHeight;
        } else {
          scale = scaleHeight;
        }
        this.canvasHeight = mapHeight / scale;
        this.canvasWidth = mapWidth / scale;
        this.$nextTick(function () {
          var canvas = oCanvas.create({
            canvas: '#mapCanvas',
            background: '#222',
            fps: 60
          })
          var rectangle = canvas.display.rectangle({
            x: 177,
            y: 170,
            origin: {x: "center", y: "center"},
            width: 200,
            height: 100,
            fill: "#333"
          });
          canvas.addChild(rectangle);
        })


      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath)
      }
    }
  }
</script>
